import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Icon, Affix, Popover, Input,Button,Row,Col } from 'antd';
import styles from '../index.less';
import BodyContent from './BodyContent';
import BodyImgContent from './BodyImgContent';
import BodyAddItemsContent from './BodyAddItemsContent';
import BodyAddShopContent from './BodyAddShopContent';
import BodySeparator from './BodySeparator';
import AlbumModal from '../../AlbumModal';
import CustomAuctionModal from '../../AuctionModal/CustomAuctionModal';

const { TextArea } = Input;
@connect(state => ({

}))

export default class Body extends PureComponent {
  state = {
    paragraphVisible: -1,
    paragraphIcon: [
      'https://gw.alicdn.com/tfs/TB1NwXPRpXXXXaqaXXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
      'https://gw.alicdn.com/tfs/TB1f4ipRpXXXXbrXXXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
      'http://gw.alicdn.com/tfs/TB1eK1mRpXXXXbVXXXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
      'http://gw.alicdn.com/tfs/TB1gttKRpXXXXb5aXXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
      'http://gw.alicdn.com/tfs/TB16VlFRpXXXXc8aXXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
      'http://gw.alicdn.com/tfs/TB1qV5jRpXXXXcvXXXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
      'http://gw.alicdn.com/tfs/TB1dhVSRpXXXXcTXVXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
      'http://gw.alicdn.com/tfs/TB1mzVDRpXXXXapapXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
      'http://gw.alicdn.com/tfs/TB1UWFWRpXXXXakXVXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
      'http://gw.alicdn.com/tfs/TB1XkWcRpXXXXbBXpXXXXXXXXXX-127-49.png_170x10000.jpg_.webp',
    ],
    defaultData: null,
    moduleInfo: {},
    text:'',
    title:'请填写分隔符内容',
    topNum:'01',
    items:[]
  }
   componentDidMount(){

  }
  componentWillMount() {
    const { props } = this.props;
    if (props.moduleInfos) {
      let moduleInfo = {};
      if (props.enableAutoOrder === 'single-item-rank:topNum;') {
        moduleInfo = props.moduleInfos['UPX-48578-20016185602'];
      } else if (props.enableAutoOrder === 'single-item-inventory:topNum;') {
        moduleInfo = props.moduleInfos['UPX-48576-20014762302'];
      }
      if (moduleInfo && moduleInfo.data && moduleInfo.data.title) {
        this.setState({
          moduleInfo,
          defaultData: moduleInfo.data,
        });
      }
    }
  }
  componentWillUnmount() {
  }
  handleShowBodyStruct = (index) => {
    if (this.props.operation !== 'view') {
      this.setState({
        paragraphVisible: index,
      });
    }
  }
  handleAddBodyStruct = (key) => {
    console.log(this.props);
    const { props } = this.props;
    const { moduleInfo } = this.state;
    const propsData = props.sidebarBlockList.find(item => item.blockName === key);
    if(props.value.length < 10){
       if ( key === 'CustomParagraph') {
        console.log(propsData);
        // let guid = '';
        // if (props.enableAutoOrder === 'single-item-rank:topNum;') {
        //   guid = 'SingleItemRank-0';
        // } else if (props.enableAutoOrder === 'single-item-inventory:topNum;') {
        //   guid = 'SingleItemInventory-0';
        // }
        // const data = {
        //   attrs: moduleInfo.attrs || {},
        //   data: {
        //     topNum: props.value.length,
        //   },
        //   materialId: moduleInfo.materialId,
        //   name: 'two-column-items',
        //   resourceId: moduleInfo.id,
        //   moduleInfo: { dataSchema: moduleInfo.dataSchema },
        //   rule: moduleInfo.rule,
        // }; 
        this.props.dispatch({
            type: 'auction/changeCustomAuctionVisible',
            payload: { currentKey: this.props.name, visible: true, api: propsData.props.api}
          });
        //  const data = { };
        // if (this.props.onChange) this.props.onChange([...props.value, data]);
      } else if ( key === 'Pic' ) {
          this.props.dispatch({
            type: 'album/show',
            payload: { currentKey: this.props.name }
          });
      } else if ( key === 'Separator' ) {
        const data = {
          attrs: moduleInfo.attrs || {},
          data: {
            topNum: this.state.topNum,
            title: this.state.title
          },
          // materialId: moduleInfo.materialId,
          name: 'shop-inventory-separator',
          moduleInfo: { dataSchema: {
              title: "编辑分隔符内容",
              type: "object",
              properties: {
                topNum: {
                  type: "string",
                  title: "序号(1-10)",
                  enum: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
                },
                title: {
                  minLength: 0,
                  type: "string",
                  title: "标题",
                  maxLength: 8
                }
              }
            } },
          rule:{
              dragable: true,
              enable: true,
              replaceable: true,
              deletable: true
            },
          materialId: "UPX-48580-20014922816",
          // title: "店铺盘点-分隔符",
          resourceId: 20014922816

        };
        if (this.props.onChange) this.props.onChange([...props.value, data]);
      }
    }
  }
  handleChangeBodyStruct = (index, content) => {
    const { props } = this.props;
    const newValue = [...props.value];
    newValue[index].data = { ...content, topNum: index + 1 };
    if (this.props.onChange) this.props.onChange(newValue);
    this.setState({
      paragraphVisible: -1,
    });
  }

  handleDeleteContent = (index) => {
    const arr = this.props.props.value;
    arr.splice(index, 1);
    if (this.props.onChange) this.props.onChange(arr);
  }
  handleDeleteImg = (index) => {
    const { props } = this.props;
    const newValue = [...props.value];
    newValue.splice(index, 1);
    if (this.props.onChange) this.props.onChange(newValue)
  }
  handleChangeCustomAuction = (val) => {
    console.log(val);
    const props = this.props.props;
    console.log(props);
    let data ;
    if (val[0].name === 'content-shop') {
      console.log(val[0].dataSchema);
       data = {
        attrs: {},
        data:{
          shopDetail: val[0].data.shopDetail
        },
        errorMsg: "",
        guid: 'ContentShop-1',
        materialId: val[0].materialId,
        name: val[0].name,
        resourceId: val[0].id,
        moduleInfos: {
        "UPX-48583-20014922815": { dataSchema: val[0].dataSchema } },
        rule: val[0].rule,
      };
      console.log(data);
    } else if (val[0].name === 'two-column-items' || val[0].name === 'weitao-item-pk') {
        data = {
          attrs: {},
          data:{
            items: val[0].data.items
          },
          errorMsg: "",
          guid: 'TwoColumnItems-1',
          materialId: val[0].materialId,
          name: val[0].name,
          resourceId: val[0].id,
          moduleInfo: { dataSchema: val[0].dataSchema },
          rule: val[0].rule,
        };
      console.log(data);
    } else if ( val[0].name === 'ceping-separator1' || val[0].name === 'ceping-separator2' || val[0].name === 'ceping-separator3' ) {
        data = {
          attrs: val[0].attrs || {},
          attrsSchema: val[0].attrsSchema,
          componentId: val[0].componentId,
          data: val[0].data,
          materialId: val[0].materialId,
          name: val[0].name,
          resourceId: val[0].id,
          moduleInfo: { dataSchema: val[0].dataSchema },
          rule: val[0].rule,
        };
    } else if ( val[0].name === 'weitao-score-range' ) {
        data = {
          attrs: val[0].attrs || {},
          attrsSchema: val[0].attrsSchema,
          componentId: val[0].componentId,
          data: val[0].data,
          materialId: val[0].materialId,
          name: val[0].name,
          resourceId: val[0].id,
          moduleInfo: { dataSchema: val[0].dataSchema },
          rule: val[0].rule,
        };
    }
    
    if (this.props.onChange) this.props.onChange([...props.value, data]);
console.log(this.props.props.value);
  }
  handleChangeCover = (imgs) => {
    const { props } = this.props;
    const propsData = props.sidebarBlockList.find(item => item.blockName === 'Pic');
    if (imgs && imgs.length > 0) {
      const data = {
        attrs: propsData.moduleInfo.attrs || {},
        data:{
          images: [{
            picUrl: imgs[0].url,
            materialId: imgs[0].materialId,
            picHeight: imgs[0].picHeight,
            picWidth: imgs[0].picWidth
          }]
        },
        // errorMsg: "",
        // guid: propsData.moduleInfo.guid,
        materialId: imgs[0].materialId,
        name: propsData.moduleInfo.name,
        resourceId: propsData.moduleInfo.id,
        moduleInfo: { dataSchema: propsData.moduleInfo.dataSchema },
        rule: propsData.moduleInfo.rule,
      };
      if (this.props.onChange) this.props.onChange([ ...props.value, data ]);
    }
  }

  textChange = (e) => {
     this.setState({
      text:e.target.value
    })
    const { props } = this.props;
    const propsData = props.sidebarBlockList.find(item => item.blockName === 'Paragraph');
    const data = {
        attrs: propsData.moduleInfo.attrs || {},
        data:{
          text: e.target.value
        },
        name: propsData.moduleInfo.name,
        resourceId: propsData.moduleInfo.id,
        moduleInfo: { dataSchema: propsData.moduleInfo.dataSchema },
        rule: propsData.moduleInfo.rule,
      };
      if (this.props.onChange) this.props.onChange([ ...props.value, data ]);
  }
  handleBodyParaContentChange = (index,content) => {
    console.log(content);
    const { props } = this.props;
     const newValue = [...props.value];
    newValue[index].data = { text:content};
    if (this.props.onChange) this.props.onChange(newValue);
    this.setState({
      paragraphVisible: -1,
    });
  }

handleBodyAddShopChange = (index,content) => {
    console.log(content);
    const { props } = this.props;
     const newValue = [...props.value];
    newValue[index].data = { shopDetail:[content]};
    if (this.props.onChange) this.props.onChange(newValue);
    this.setState({
      paragraphVisible: -1,
    });
  }

  handleAddItemsCtChange = (index,content) => {
    const { props } = this.props;
    const newValue = [...props.value];
    console.group('================')
    this.props.onChange(content);
    if(content.length <= 2){
      newValue[index].data = {items: content};
      if ( content.length === 2 ) {
        this.setState({
          paragraphVisible: -1,
        });
      }
    } else if (content.length > 2) {
      newValue[index].data = {items: content.slice(0,2)};
    }
    if (this.props.onChange) this.props.onChange(newValue)
  }
  handleSeparatorChange = (index,content) => {
    const { props } = this.props;
    const newValue = [...props.value];
    let newTopNum = '01';
    if(content.topNum < 10){
      this.newTopNum = '0' + content.topNum;
    }else{
      this.newTopNum = content.topNum;
    }
    newValue[index].data = { topNum:this.newTopNum,title:content.title};
    if (this.props.onChange) this.props.onChange(newValue);
    this.setState({
      paragraphVisible: -1,
      topNum:this.newTopNum,
      title:content.title
    });
  }
  renderBodyStructTitle = () => {
    return (
      <div style={{ position: 'relative', height: 32, lineHeight: '32px' }}>
        <span>编辑段落</span>
        <Icon
          onClick={() => { this.setState({ paragraphVisible: -1 }); }}
          style={{ position: 'absolute', right: 0, top: 0, fontSize: 18, paddingTop: 6, cursor: 'pointer' }}
          type="close"
        />
      </div>
    );
  }
  renderBodyImgTitle = () => {
    return (
      <div style={{ position: 'relative', height: 32, lineHeight: '32px' }}>
        <span>编辑文字</span>
        <Icon
          onClick={() => { this.setState({ paragraphVisible: -1 }); }}
          style={{ position: 'absolute', right: 0, top: 0, fontSize: 18, paddingTop: 6, cursor: 'pointer' }}
          type="close"
        />
      </div>
    )
  }
  renderBodyShopTitle = () => {
    return (
      <div style={{ position: 'relative', height: 32, lineHeight: '32px' }}>
        <span>店铺信息</span>
        <Icon
          onClick={() => { this.setState({ paragraphVisible: -1 }); }}
          style={{ position: 'absolute', right: 0, top: 0, fontSize: 18, paddingTop: 6, cursor: 'pointer' }}
          type="close"
        />
      </div>
    )
  }
  renderTwoColumnItemsTitle = () => {
    return (
      <div style={{ position: 'relative', height: 32, lineHeight: '32px' }}>
        <span>编辑宝贝</span>
        <Icon
          onClick={() => { this.setState({ paragraphVisible: -1 }); }}
          style={{ position: 'absolute', right: 0, top: 0, fontSize: 18, paddingTop: 6, cursor: 'pointer' }}
          type="close"
        />
      </div>
    )
  }
  renderSeparatorTitle = () => {
    return (
      <div style={{ position: 'relative', height: 32, lineHeight: '32px' }}>
        <span>编辑分隔符内容</span>
        <Icon
          onClick={() => { this.setState({ paragraphVisible: -1 }); }}
          style={{ position: 'absolute', right: 0, top: 0, fontSize: 18, paddingTop: 6, cursor: 'pointer' }}
          type="close"
        />
      </div>
    )
  }
  renderBodyStruct = (item, index) => {
    const { props, name } = this.props;
    const { paragraphIcon, defaultData } = this.state;
    const value = props.value;
    const enterShopBtn = {
      background: '-webkit-linear-gradient(left, #ff7f00, #ff5100)',
      color:'#fff',
      padding:'2px 8px',
      borderRadius:'14px',
      fontSize:'12px',
      marginTop:'10px'
    };
    console.log(item);
    if (item.name === 'single-item-rank' || item.name === 'single-item-inventory') {
      const data = item.data;
      return (
        <Popover
          style={{ padding: 20 }}
          key={index}
          overlayClassName={styles.popover_box}
          placement="right"
          title={this.renderBodyStructTitle()}
          content={<BodyContent visible={this.state.paragraphVisible === index ? true : false} name={name} moduleInfo={item.moduleInfo} onChange={(value) => this.handleChangeBodyStruct(index, value)} props={props} value={item} index={index} />}
          trigger="click"
          visible={this.state.paragraphVisible === index ? true : false}
          autoAdjustOverflow={false}
        >
          <div style={{ padding: 20, position: 'relative' }} onClick={() => this.handleShowBodyStruct(index)}>
            <div className={styles.borderBox} style={{ display: this.state.paragraphVisible === index ? 'block' : 'none' }}></div>
            <div style={{ textAlign: 'center' }}>
              <img style={{ width: 60, height: 'auto' }} src={paragraphIcon[index]} alt="hgjhj" />
            </div>
            <div className={styles.section_show_title}>
              { data && data.title ? data.title : defaultData.title }
            </div>
            <div>
              <img
                style={{ width: '100%', height: 'auto' }}
                src={data && data.items && data.items.length > 0 ? data.items[0].item_pic : 'https://gw.alicdn.com/tfs/TB1A5.geC_I8KJjy0FoXXaFnVXa-702-688.jpg_790x10000Q75.jpg_.webp'}
              ></img>
            </div>
            <div className={styles.itemTitle} style={{ color: '#000', fontSize: '16px' }}>
              { data && data.itemTitle ? data.itemTitle : defaultData.itemTitle }
            </div>
            <div className={styles.itemTitle}>
              { data && data.itemDescription ? data.itemDescription : defaultData.itemDescription }
            </div>
            { index >= props.topLockIndex && this.state.paragraphVisible === index &&
              <div onClick={() => this.handleDeleteContent(index)} className={styles.deleteContentBox}>
                <Icon type="delete" />
              </div>
            }
          </div>
        </Popover>
      );
    } else if (item.name === 'paragraph') {
        if (value && value.length > 0) {
          return (
            <Popover overlayClassName={styles.popover_box}
              placement="right"
              title={this.renderBodyImgTitle()}
              content={<BodyImgContent onChange={(value) => this.handleBodyParaContentChange(index, value)} 
              visible={this.state.paragraphVisible === index ? true : false} 
              name={name} props={props} value={item} index={index} />}
              trigger="click"
              visible={this.state.paragraphVisible === index ? true : false}
              autoAdjustOverflow={false}
              key={index}>
              <div style={{margin:'20px'}} onClick={() => this.handleShowBodyStruct(index)}>
                <div style={{position:'relative',padding:'0 20px',minHeight:'60px'}}>
                  <div className={styles.borderBox} style={{ display: this.state.paragraphVisible === index ? 'block' : 'none' }}>               
                    {/*<span style={{background:'#00b395',color:'#fff',padding:'4px 10px',position:'absolute',bottom:'0',left:'36.2%'}}>在下方添加文字</span>*/}
                  </div>
                  <div >
                  {item.data.text}
                  </div>
                  { this.state.paragraphVisible === index &&
                  <div onClick={() => this.handleDeleteImg(index)} className={styles.deleteContentBox}>
                    <Icon type="delete" />
                  </div>
                  }
                </div>
              </div>
            </Popover>
            )
        }
      } else if (item.name === 'picture') {
         // <Popover
         //      overlayClassName={styles.popover_box}
         //      placement="right"
         //      title={this.renderBodyImgTitle()}
         //      content={<BodyImgContent visible={this.state.paragraphVisible === index ? true : false} name={name} props={props} value={item} index={index} />}
         //      trigger="click"
         //      visible={this.state.paragraphVisible === index ? true : false}
         //      autoAdjustOverflow={false}
         //      key={index}
         //    >
          return  <div style={{overflow:'hidden'}} onClick={() => this.handleShowBodyStruct(index)} key={index}>
              <div style={{position:'relative',padding:'0 20px',}}>
               <div className={styles.borderBox} style={{ display: this.state.paragraphVisible === index ? 'block' : 'none' }}>               
                 {/*<span style={{background:'#00b395',color:'#fff',padding:'4px 10px',position:'absolute',bottom:'0',left:'36.2%'}}>在下方添加文字</span>*/}
               </div>
               <img src={item.data.images[0].picUrl} style={{width:'100%'}}/>
                {this.state.paragraphVisible === index &&
                  <div onClick={() => this.handleDeleteImg(index)} className={styles.deleteContentBox}>
                    <Icon type="delete" />
                  </div>
                }
              </div>
            </div>
           // </Popover>
        } else if (item.name === 'content-shop') {
          console.log(item);
          const shopData = item.data.shopDetail[0];
          const levelStyle = {
            backgroundPosition: '-104px -277px',
            width: '16px',
            height: '15px', display: 'inline-block',
            fontSize: 0,
            backgroundImage: 'url(//img.alicdn.com/tps/i1/TB1ywPXMpXXXXcgXXXXCOJf0VXX-637-601.png)',
            backgroundSize: '319px 301px',
            backgroundRepeat: 'no-repeat'
          };
          let levelArr = [];
          for (var i = 0; i < shopData.level; i++) {
            shopData.level[i]
            levelArr[i] = i;
          }

          return <Popover overlayClassName={styles.popover_box}
              placement="right"
              title={this.renderBodyShopTitle()}
              content={<BodyAddShopContent onChange={(value) => this.handleBodyAddShopChange(index, value)} 
                visible={this.state.paragraphVisible === index ? true : false} 
                name={name} props={props} value={item} index={index} />}
              trigger="click"
              visible={this.state.paragraphVisible === index ? true : false}
              autoAdjustOverflow={false} 
              key={index}>
              <div style={{padding:'20px', position:'relative'}} onClick={() => this.handleShowBodyStruct(index)}>
                <div className={styles.borderBox} style={{ display: this.state.paragraphVisible === index ? 'block' : 'none' }}>               
                  {/*<span style={{background:'#00b395',color:'#fff',padding:'4px 10px',position:'absolute',bottom:'0',left:'36.2%',zIndex:'2'}}>在下方添加文字</span>*/}
                </div>
                <div style={{display:'flex',background:'#fafafa'}}>
                  <img style={{width:'100px',height:'100px',float:'left'}} src={shopData.shop_logo} />
                  <div style={{flex:1, padding:'10px'}}>
                    <span style={{fontSize:'16px', fontWeight:'300',color:'#000'}}>{shopData.shop_title}</span>
                    <p style={{fontSize:'14px', fontWeight:'300',color:'#000'}}>{shopData.shop_desc}</p>
                    <div style={{display:'flex',justifyContent:'space-between'}}>
                      <div style={{paddingTop:'10px'}}>
                      {levelArr.map((item, index) => <div key={index} style={levelStyle}></div>)}
                      </div>
                      <div style={enterShopBtn}>
                        进入店铺
                      </div>
                    </div>
                  </div>
                </div>
                { this.state.paragraphVisible === index &&
                    <div onClick={() => this.handleDeleteImg(index)} className={styles.deleteContentBox}>
                      <Icon type="delete" />
                    </div>
                  }
              </div>
          </Popover>
        } else if (item.name === 'two-column-items' || item.name === 'weitao-item-pk') {
          console.log(item, props);
          // item.attrs = {class:''};
          console.log(item);
          return  <Popover
                style={{ padding: 20 }}
                key={index}
                overlayClassName={styles.popover_box}
                placement="right"
                title={this.renderTwoColumnItemsTitle()}
                content={<BodyAddItemsContent onChange={(value) => this.handleAddItemsCtChange(index,value)} 
                visible={this.state.paragraphVisible === index ? true : false} 
                name={name} props={props} value={item} index={index}/>}
                trigger="click"
                visible={this.state.paragraphVisible === index ? true : false}
                autoAdjustOverflow={false}
              >   
                <div style={{padding:'20px',position:'relative'}} onClick={() => this.handleShowBodyStruct(index)}>
                  <div className={styles.borderBox} style={{ display: this.state.paragraphVisible === index ? 'block' : 'none' }}>               
                    {/*<span style={{background:'#00b395',color:'#fff',padding:'4px 10px',position:'absolute',bottom:'0',left:'36.2%',zIndex:'2'}}>在下方添加文字</span>*/}
                  </div>
                  <Row gutter={8}> 
                  {item.data.items.length ? item.data.items.map((item1,index) => <Col className="gutter-row" span={12} key={index}>
                      <div className="gutter-box">
                        <img style={{width:'100%'}} src={item1.item_pic}/>
                      </div>
                      <h4 style={{paddingTop:'5px'}}>{item1.item_title}</h4>
                      <div style={{marginTop:'5px'}}>
                        <span style={{color:'#ef6827',fontSize:'18px',paddingRight:'5px'}}>{item1.itemPriceDTO.price.item_price}</span>
                      </div>
                    </Col>
                  ) : <div></div>}
                  </Row>
                  { this.state.paragraphVisible === index &&
                    <div onClick={() => this.handleDeleteImg(index)} className={styles.deleteContentBox}>
                      <Icon type="delete" />
                    </div>
                  }
                </div>
              </Popover>
    } else if (item.name === 'shop-inventory-separator') {
      return <Popover
                style={{ padding: 20 }}
                key={index}
                overlayClassName={styles.popover_box}
                placement="right"
                title={this.renderSeparatorTitle()}
                content={
                  <BodySeparator 
                    visible={this.state.paragraphVisible === index ? true : false}
                    name={name} props={props} value={item} index={index}
                    onChange={(value) => this.handleSeparatorChange(index,value)}
                  />
                  }
                trigger="click"
                visible={this.state.paragraphVisible === index ? true : false}
                autoAdjustOverflow={false}
              >   
                <div style={{padding:'20px',position:'relative'}} onClick={() => this.handleShowBodyStruct(index)}>
                  <div className={styles.borderBox} style={{ display: this.state.paragraphVisible === index ? 'block' : 'none' }}>               
                    {/*<span style={{background:'#00b395',color:'#fff',padding:'4px 10px',position:'absolute',bottom:'0',left:'36.2%',zIndex:'2'}}>在下方添加文字</span>*/}
                  </div>
                  <div style={{textAlign:'center'}}>
                    <em style={{fontSize:'18px'}}>{item.data.topNum}</em>
                    <h3>{item.data.title}</h3>
                  </div>
                  { this.state.paragraphVisible === index &&
                    <div onClick={() => this.handleDeleteImg(index)} className={styles.deleteContentBox}>
                      <Icon type="delete" />
                    </div>
                  }
                </div>
              </Popover>
        } else if ( item.name === 'ceping-separator1' || item.name === 'ceping-separator2' ) {
          return  <div key={index} style={{padding:'20px',position:'relative'}} onClick={() => this.handleShowBodyStruct(index)} >
                    <div className={styles.borderBox} style={{ display: this.state.paragraphVisible === index ? 'block' : 'none' }}>               
                      {/*<span style={{background:'#00b395',color:'#fff',padding:'4px 10px',position:'absolute',bottom:'0',left:'36.2%',zIndex:'2'}}>在下方添加文字</span>*/}
                    </div>
                    {item.name === 'ceping-separator1' ? <div style={{textAlign:'center',fontSize:'18px'}}>
                      <b><em>01</em></b>
                      <p>评测选品</p>
                    </div> :  <div style={{textAlign:'center',fontSize:'18px'}}>
                      <b><em>02</em></b>
                      <p>评测维度</p>
                    </div> }
                    
                    { this.state.paragraphVisible === index &&
                      <div onClick={() => this.handleDeleteImg(index)} className={styles.deleteContentBox}>
                        <Icon type="delete" />
                      </div>
                    }
                  </div>
        } else if ( item.name === 'ceping-separator3') {
          return  <div key={index} style={{padding:'20px',position:'relative'}} onClick={() => this.handleShowBodyStruct(index)} >
                    <div className={styles.borderBox} style={{ display: this.state.paragraphVisible === index ? 'block' : 'none' }}>               
                      {/*<span style={{background:'#00b395',color:'#fff',padding:'4px 10px',position:'absolute',bottom:'0',left:'36.2%',zIndex:'2'}}>在下方添加文字</span>*/}
                    </div>
                    <div style={{textAlign:'center',fontSize:'18px'}}>
                      <b><em>03</em></b>
                      <p>评测结果</p>
                    </div> 
                    { this.state.paragraphVisible === index &&
                      <div onClick={() => this.handleDeleteImg(index)} className={styles.deleteContentBox}>
                        <Icon type="delete" />
                      </div>
                    }
                  </div>
        } else if ( item.name === 'weitao-score-range' ) {
          const scores = item.data.scores;
          console.log(item);
          return <Popover
                  style={{ padding: 20 }}
                  key={index}
                  overlayClassName={styles.popover_box}
                  placement="right"
                  title={this.renderSeparatorTitle()}
                  content={
                    <div>111222</div>
                    }
                  trigger="click"
                  visible={this.state.paragraphVisible === index ? true : false}
                  autoAdjustOverflow={false} >
                  <div style={{padding: '20px', position: 'relative'}} onClick={() => this.handleShowBodyStruct(index)}>
                    <div className={styles.borderBox} style={{ display: this.state.paragraphVisible === index ? 'block' : 'none' }}>               
                      {/*<span style={{background:'#00b395',color:'#fff',padding:'4px 10px',position:'absolute',bottom:'0',left:'36.2%',zIndex:'2'}}>在下方添加文字</span>*/}
                    </div>
                    {scores && scores.map((item, index) => {
                      return <div key={index}>
                            <span style={{display:'inline-block', width:'32%'}}><b>{item.item_title}</b></span>  
                            <span style={{display:'inline-block', width:'8%'}}><b>{item.item_score}</b></span>
                            <span style={{display:'inline-block', width:'60%',height:'10px',background:'#fff1eb',position:'relative'}}>
                              <span style={{display:'inline-block',position:'absolute',width:'30%',height:'10px',background:'#ff5500'}}></span>
                            </span>
                            { this.state.paragraphVisible === index &&
                              <div onClick={() => this.handleDeleteImg(index)} className={styles.deleteContentBox}>
                                <Icon type="delete" />
                              </div>
                            }
                          </div>
                        })
                      }
                  </div>
          </Popover>
        }
      }


  render() {
    const { operation, props, name} = this.props;
    console.log(props);
    const { text } = this.state;
    let textArr = props.value;
    let disabled = false;
    const customData = props.sidebarBlockList.find(item => item.blockName === 'CustomParagraph');
    if (operation === 'view') {
      disabled = true;
    }
    console.log(props.sidebarBlockList);
    return (
      <div style={{ padding: '0 0 20px', position: 'relative' }}>
       {/*&& item.blockName !== 'CustomParagraph'*/}
        { !disabled && 
          <Affix style={{ position: 'absolute', top: 0, left: '-80px' }}>
            {props.sidebarBlockList.filter(item => item.blockName !== 'StdParagraph' ).map((item, index) =>
              <div key={index} className={styles.sidebarBlockBox}
                onClick={() => {this.handleAddBodyStruct(item.blockName)}}
                style={{ display: item.display ? '' : 'none' }}>
                <div>
                  <img style={{ width: 30, height: 30 }} src={item.icon} />
                </div>
                <div style={{ fontSize: 12, color: '#999' }}>
                  {item.title}
                </div>
              </div>)}
          </Affix>
      }
        { props.value && props.value.map((item, index) => this.renderBodyStruct(item, index))}
        <div style={{margin:'20px'}}>
          <Input placeholder="+快速添加文字" onClick={this.renderBodyStruct(props.value,0)} onBlur={(value) => this.textChange(value)} style={{border: '1px dashed #c9c9c9',textAlign:'center',padding:'10px'}}/>
        </div>
        <AlbumModal mode="single" k={name} onOk={this.handleChangeCover} />
        <CustomAuctionModal k={name} onOk={this.handleChangeCustomAuction} api={customData.props.api} />
      </div>
    );
  }
}
